<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
     <style type="text/css">
        .hi{
            border:1px black solid;
        }
        #wraper{
            width: 150px;
        }
        #search{
            width: 150px;
        }
    </style>
</head>
<body>
    <div id = "wraper" >
        <input type="text" name="searchText" id="search">
        <div id = "div" ></div>
    </div>
</body>
<script>
    $(function(){
        $("#div").addClass("hi");
        $("input:first").on("keyup",function(e){
            $.ajax({
                type:"GET",
                url:"http://localhost:8080/Aug1st/search",
                data:{areaName:$(e.target).val()},
                dataType:"json"
            })
            .done(function(msg){
                $("#div").children().remove();
                if(msg.length!=0){
                    msg.forEach((item)=>{
                        $("#div").append($("<li></li>").text(item.areaName));
                    });
                }
            })
        })
    });
</script>
</html>